<template>
	<view>
		<nav-bar   backState="2000" fontColor="#FFFFFF" title="订单"></nav-bar>
		<view class="contentBox">
			<view class="contentBox1" @click="unpaidOrder">
				<image class="img" src="../../static/icon/iconIndex/shipping-order.png"></image>
				<view class="title">未付款采购订单</view>
				<view class="colorBar"></view>
			</view>
			<view class="contentBox1">
				<image class="img" src="../../static/icon/iconIndex/userSearch.png"></image>
				<view class="title">采购订单查询</view>
			</view>
			
			<view class="colorLongBar"></view>
		</view>
		<view class="contentBox">
			<view class="contentBox1">
				<image class="img" src="../../static/icon/iconIndex/shipping-order.png"></image>
				<view class="title">销售订单</view>
				<view class="colorBar"></view>
			</view>
			<view class="contentBox1">
				<image class="img" src="../../static/icon/iconIndex/shipping-car.png"></image>
				<view class="title">销售订单发货</view>
			</view>
			
			<view class="colorLongBar"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			unpaidOrder(){
				uni.navigateTo({
					url: '/pages/order/unpaid-order'
				})
			}
		}
	}
</script>

<style>
page {
		background: #ffff;
	}

	.contentBox {
		position: relative;
		width: 100%;
		height: 250rpx;
		display: flex;
		/* border-bottom: 1px solid #3B5DE0; */
	}

	.contentBox1 {
		width: 50%;
		height: 250rpx;
		/* border: 1px solid #efefef; */
		position: relative;
	}

	.img {
		position: absolute;
		height: 100rpx;
		width: 100rpx;
		top: 40%;
		left: 50%;
		margin: -50rpx 0 0 -50rpx;
	}

	.colorBar {
		position: absolute;
		height: 130rpx;
		width: 5rpx;
		top: 50%;
		left: 112%;
		background-image: linear-gradient(#ffffff, #3B5DE0, #ffffff);
		margin: -50rpx 0 0 -50rpx;
	}

	.title {
		color: #000000;
		font-size: 28rpx;
		letter-spacing: 3rpx;
		text-align: center;
		margin-top: 48%;
	}

	.colorLongBar {
		position: absolute;
		height: 5rpx;
		width: 90%;
		top: 105%;
		left: 5%;
		background-image: linear-gradient(to right, #ffffff, #3B5DE0, #ffffff);

	}

	.drawer {
		width: 100%;
		height: 250rpx;
		background: #3B5DE0;

	}

	.titleOne {
		color: #FFFFFF;
		font-size: 32rpx;
		letter-spacing: 5rpx;
		text-align: center;
		font-weight: 700;
		padding-top: 70rpx;
	}

	.titleTwo {
		color: #FFFFFF;
		font-size: 32rpx;
		letter-spacing: 5rpx;
		text-align: center;
		font-weight: 700;
		margin-top: 25rpx;
	}

	.popup {
		width: 100%;

		view {
			font-size: 45upx;
			text-align: center;
			color: #fff;
			margin-bottom: 60upx;
		}

		image {
			display: block;
			margin: 0 auto;
		}
	}
</style>
